<template>
    <div class="box">
      <div class="head-search">
        <search @onSubmit="onSearch">
          <el-form-item label="操作用户">
            <el-input placeholder="请输入内容" clearable v-model="searchData.operator" size="small"></el-input>
          </el-form-item>
          <el-form-item label="操作时间">
            <el-input placeholder="请输入内容" clearable v-model="searchData.operationTime" size="small"></el-input>
          </el-form-item>
        </search>
      </div>
      <section class="list-box">
        <el-table
          :data="tableData"
          border
          v-loading="tableLoading"
          height="calc(100vh - 250px)"
          class="table">
          <el-table-column
            fixed="left"
            align="center"
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="operator"
            label="操作用户">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="operationModule"
            label="操作模块"
            width="180">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="operationFunction"
            label="操作功能">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="fileId"
            label="档案或文件ID">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="operationIp"
            label="操作IP">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="operationTime"
            :formatter="formatDate"
            label="操作时间">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="operationContent"
            label="操作内容">
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNo"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </section>
    </div>
</template>

<script>
import Search from '../../../../../components/search/search'
import { getArchivesManageJournal } from '../../../../../api/logAudit'
export default {
  name: 'archivesManageJournal', // 档案管理日志
  components: { Search },
  data () {
    return {
      tableLoading: true,
      searchData: {
        operator: '',
        operationTime: ''
      },
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
      tableData: [],
      params: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      this.tableLoading = true
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        sorters: [{
          asc: false,
          name: 'operationTime'
        }]
      }
      if (this.params.length > 0) {
        param.params = this.params
      }
      await getArchivesManageJournal(param).then(res => {
        this.tableData = res.data.data.list
        this.page.total = res.data.data.total
      })
      this.tableLoading = false
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getList()
    },
    onSearch () {
      // 搜索
      this.params = []
      Object.keys(this.searchData).forEach(key => {
        if (this.searchData[key]) {
          this.params.push({
            name: key,
            op: 'like',
            value: this.searchData[key]
          })
        }
      })
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.head-search{
  ::v-deep .search-btn{
    margin-top: 0;
  }
}
</style>
